<template>
  <el-row id="warn-center-container">

    <el-row class="tittle-nav">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        background-color="#17252f"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect" >
        <el-menu-item index="1">告警列表</el-menu-item>
        <el-menu-item index="2">告警配置</el-menu-item>
        <el-menu-item index="3">告警统计</el-menu-item>
      </el-menu>
    </el-row>

    <el-row v-if="isShowTable">
      <warn-table></warn-table>
    </el-row>

    <el-row v-if="isShowRule">
      <warn-rule></warn-rule>
    </el-row>

    <el-row v-if="isShowStatistics">
      <warn-statistics></warn-statistics>
    </el-row>

  </el-row>

</template>

<script>
  import WarnTable from "../../../components/WarnCenter/warnTable";
  import WarnRule from "../../../components/WarnCenter/warnRule";
  import WarnStatistics from "../../../components/WarnCenter/warnStatistics";

  export default {
    name: "index",
    components: {
      WarnRule,
      WarnTable,
      WarnStatistics},
    data(){
      return {
        activeIndex:'1',
        isShowTable: true,
        isShowRule: false,
        isShowStatistics: false,
      }
    },
    created() {
      this.$emit('fixHeadIndex', "6")
    },
    methods:{
      handleSelect(key){
        this.activeIndex = key
        switch (key) {
          case "1":{
            this.isShowTable = true
            this.isShowRule = false
            this.isShowStatistics = false
            break
          }
          case "2":{
            this.isShowTable = false
            this.isShowRule = true
            this.isShowStatistics = false
            break
          }
          case "3":{
            this.isShowTable = false
            this.isShowRule = false
            this.isShowStatistics = true
            break
          }
        }
      }
    }
  }
</script>

<style lang="scss">
  #warn-center-container{

    .tittle-nav{
      height: 50px;
      background-color: #17252f;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .el-menu {
      display: inline-block;
      font-size: 14px;
      line-height: 50px;
      margin-left: 8px;
    }

    .el-menu--horizontal > .el-menu-item {
      height: 50px!important;
      line-height: 50px!important;
      margin: 0;
      border-bottom: 0px solid transparent;
    }

    .el-menu.el-menu--horizontal {
      border-bottom: solid 0px #e6e6e6;
    }

    .el-menu--horizontal>.el-menu-item.is-active {
      border-bottom: 0px solid #303133;
      color: #303133;
    }

  }
</style>
